<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>

<%@ page import="com.milk_shop.model.Package"%>
<%@ page import="com.milk_shop.model.Food"%>
<%@ page import="java.util.*"%>
<%
	String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<base href="<%=basePath%>" />
<%
	List<Package> packages = (List<Package>) application.getAttribute("packages");
%>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>四季奶坊</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script src="js/httpVueLoader.js"></script>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
<style>
.nav-name {
	margin: 10px auto;
}

.manage-btn {
	text-align: right;
	margin-right: 100px;
	font-size: 12px
}

.el-table .warning-row {
	background: oldlace;
}

.el-table .success-row {
	background: #f0f9eb;
}

.food-container {
	width: 80%;
	margin: 0 25px;
}

.page {
	margin: 20px;
	text-align: right;
}
</style>
</head>

<body>
	<div id="app">
		<el-container style="height: 650px;"> <sider-component></sider-component>
		<div class="food-container">
			<div class="nav-name">
				<h2>套餐管理</h2>
			</div>
			<div class="manage-btn">
				<el-button type="primary" @click="addDialogVisible = true" plain>添加</el-button>
			</div>
			<el-table :data="currentPageData" style="width: 100%"
				:row-class-name="tableRowClassName" @cell-dblclick="tableEdit">
			<el-table-column label="套餐图" width="180">
			<template slot-scope="scope">
				<img :src="scope.row.foodImg" width="50px" height="50px">
			</template>
			</el-table-column> <el-table-column label="套餐名称">
			<template slot-scope="scope">
				<el-input v-model="scope.row.name" autocomplete="off"></el-input>
			</template>
			</el-table-column> <el-table-column label="饮品">
			<template slot-scope='scope'>
				<el-select v-model="scope.row.milk" :placeholder="scope.row.milk">
				<el-option v-for="item in drinks" :key="item.id" :label="item.label"
					:value="item.id"> </el-option> </el-select>
			</template>
			</el-table-column> <el-table-column label="甜品">
			<template slot-scope='scope'>
				<el-select v-model="scope.row.dessert"
					:placeholder="scope.row.dessert"> <el-option
					v-for="item in desserts" :key="item.id" :label="item.label"
					:value="item.id"> </el-option> </el-select>
			</template>
			</el-table-column> <el-table-column label="推荐理由">
			<template slot-scope="scope">
				<el-input v-model="scope.row.recommReason" autocomplete="off"></el-input>
			</template>
			</el-table-column> <el-table-column label="操作" width="180" align="center">
			<template slot-scope="scope">
				<el-button type="success" @click="modify(scope.row)" plain>更新</el-button>
				<el-button type="danger" @click="deleted(scope.row)" plain>删除</el-button>
			</template>
			</el-table-column> </el-table>
			<el-pagination background layout="prev, pager, next" :page-size="4"
				:total=" <%=packages.size()%> " @current-change="toPage"
				@prev-click="prevPage" @next-click="nextPage"> </el-pagination>

			<el-dialog title="添加" :visible.sync="addDialogVisible"> <el-form
				:model="form" :rules="rules" ref="form"> <el-form-item
				label="饮品" :label-width="formLabelWidth" prop="milk">
			<el-select v-model="form.milk" placeholder="请选择饮品"> <el-option
				v-for="item in drinks" :key="item.id" :label="item.label"
				:value="item.id"> </el-option> </el-select> </el-form-item> <el-form-item label="甜品"
				:label-width="formLabelWidth" prop="dessert"> <el-select
				v-model="form.dessert" placeholder="请选择甜品"> <el-option
				v-for="item in desserts" :key="item.id" :label="item.label"
				:value="item.id"> </el-option> </el-select> </el-form-item> <el-form-item label="套餐名称"
				:label-width="formLabelWidth"> <el-input
				v-model="form.name" autocomplete="off"></el-input> </el-form-item> <el-form-item
				label="推荐理由" :label-width="formLabelWidth"> <el-input
				v-model="form.recommReason" autocomplete="off"></el-input> </el-form-item>
				<el-form-item
				label="套餐图地址" :label-width="formLabelWidth"> <el-input
				v-model="form.foodImg" autocomplete="off"></el-input> </el-form-item>
				 </el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addData(form)">确 定</el-button>
			</div>
			</el-dialog>
		</div>
		</el-container>
	</div>
	<script>
    Vue.use(httpVueLoader);

    new Vue({
      el: "#app",
      components: {
        'sider-component': 'url:component/SiderNav.vue',
      },
      created: function(){
          this.setCurrentPageData();
      },
      methods: {
    	  setCurrentPageData:function() {
              // 计算一共有几页
               this.totalPage = Math.ceil(this.foodsSize / this.pageSize);
              // 计算得0时设置为1
               this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
              console.log(this.totalPage);
               let begin = (this.currentPage - 1) * this.pageSize;
               let end = this.currentPage * this.pageSize;
               console.log(begin);
               console.log(end);
               this.currentPageData = this.tableData.slice(
                   begin,
                   end
               );
           },
           //上一页
           prevPage:function(){
               console.log(this.currentPage);
               if (this.currentPage == 1) return;
                this.currentPage--;
                this.setCurrentPageData();    
           },
           // 下一页
           nextPage:function(){
               if (this.currentPage == this.totalPage)return ;
                this.currentPage++;
                this.setCurrentPageData();
           },
           //跳转到固定页
           toPage:function(page){
               if (page > this.totalPage || page < 1)return ;
               this.currentPage = page;
               this.setCurrentPageData();
           },
        tableRowClassName({ row, rowIndex }) {
          if (rowIndex === 1) {
            return 'warning-row';
          } else if (rowIndex === 3) {
            return 'success-row';
          }
          return '';
        },
        addData(form){
        	if(form.name === undefined || form.recommReason === undefined || form.dessert === undefined || form.milk === undefined ||form.foodImg === undefined
        			|| form.name === '' || form.recommReason === '' || form.dessert === '' || form.milk === '' || form.foodImg === ''){
        		this.$message({
        			type: 'warning',
        			message: '输入不能为空'
        		});
        		return;
        	}
      		this.$message({
    			type: 'submit',
    			message: '添加成功'
    		})
  		  window.location.href="packageManage/package_add?packaged.name="+form.name+"&packaged.reason="
			  +form.recommReason+"&dessertId="+form.dessert+"&drinkId="+form.milk+"&packaged.cover="+form.foodImg
  	 	 },
        modify(form){
      	if(form.name === undefined || form.recommReason === undefined || form.dessert === undefined || form.milk === undefined ||form.foodImg === undefined
    			|| form.name === '' || form.recommReason === '' || form.dessert === '' || form.milk === ''|| form.foodImg === ''){
    		this.$message({
    			type: 'warning',
    			message: '修改内容不能为空'
    		});
    		return;
    	}
          window.location.href="packageManage/package_modify?packaged.id="+form.id+"&packaged.name="
        		  +form.name+"&packaged.reason="+form.recommReason+"&dessertId="+form.dessert+"&drinkId="+form.milk;
  	  },
  	 deleted(form){
  		this.$message({
			type: 'submit',
			message: '删除成功'
		})
    	  window.location.href="packageManage/package_delete?packaged.id="+form.id;   
      },
        addSubmit(formData) {
          this.$refs[formData].validate((valid) => {
            if (valid) {
            	
            } else {
              return false;
            }
          });
        }
      },
      data: {
        addDialogVisible: false,
        modifyDialogVisible: false,
        deleteDialogVisible: false,
        foodsSize: <%=packages.size()%>, //所有数据
        totalPage: 1, // 统共页数，默认为1
        currentPage: 1, //当前页数 ，默认为1
        pageSize: 4, // 每页显示数量
        currentPageData: [] ,//当前页显示内容
        tableData: 
        	[
             <%String dessertName = (String) application.getAttribute("dessertName");
String drinkName = (String) application.getAttribute("drinkName");
for (int i = 0; i < packages.size(); i++) {
	Food drinkFood = new Food();
	Food dessertFood = new Food();
	if (!packages.get(i).getFoods().isEmpty()) {
		if (packages.get(i).getFoods().get(0).getFoodType() == 1
				|| packages.get(i).getFoods().get(0).getFoodType() == 2) {
			drinkFood = packages.get(i).getFoods().get(0);
			dessertFood = packages.get(i).getFoods().get(1);
		} else {
			drinkFood = packages.get(i).getFoods().get(1);
			dessertFood = packages.get(i).getFoods().get(0);
		}
	}%>{
            		  id:'<%=packages.get(i).getId()%>',
            		  foodImg:'<%=packages.get(i).getCover()%>',
            		  name: '<%=packages.get(i).getName()%>',
                      milk: '<%=drinkFood.getName()%>',
                      dessert: '<%=dessertFood.getName()%>',
                    recommReason: '<%=packages.get(i).getReason()%>'},
            	 <%}%>
        ],
        form: {
          name: '',
          milk: '',
          dessert: "",
          recommReason: "",
          foodImg: "",
        },
        formLabelWidth: '120px',
       
        desserts: [
<%List<Food> dessertss = (List<Food>) application.getAttribute("dessert");
for (int i = 0; i < dessertss.size(); i++) {%>
	 {
   		 id:'<%=dessertss.get(i).getId()%>',
   		 label:'<%=dessertss.get(i).getName()%>'
   		 },
	 <%}%>             
        ],
        drinks: [
<%List<Food> drink = (List<Food>) application.getAttribute("drink");
for (int i = 0; i < drink.size(); i++) {%>
               		 {
               		 id:'<%=drink.get(i).getId()%>',
               		 label:'<%=drink.get(i).getName()%>'
               		 },          		
               	 <%}%>     
        ],
        rules: {
          milk: [
            { required: true, message: '请选择奶茶', trigger: 'change' }
          ],
          dessert: [
            { required: true, message: '请选择甜点', trigger: 'change' }
          ],
        }
      }
    })
  </script>
</body>

</html>